<template>
  <div class="forgot-form">
    <div class="forgot-form-inner">
      <div class="forgot-form-title">重置您的密码</div>
      <div class="forgot-form-desc" style="margin-bottom: 0">
        救援即将到来！如果我们找到您的电子邮件地址，密码重置难码将发送到：
        <span class="forgot-form-desc-email">10641548@qq.com</span>
      </div>

      <div class="forgot-form-desc" style="margin-top: 31px">
        如果您在收件箱中没有看到它，请检查您的垃圾邮件/垃圾文件夹，或联系我们的客服寻求帮助。
      </div>

      <div style="display: flex; align-items: center">
        <div class="forgot-form-input-content">
          <el-input
            v-model="emailCode1"
            @input="emailCode1Changed"
            @keydown.backspace.native="emailCode1Backspace"
            ref="emailCode1Ref"
          ></el-input>
        </div>

        <div class="forgot-form-input-content">
          <el-input
            v-model="emailCode2"
            @input="emailCode2Changed"
            @keydown.backspace.native="emailCode2Backspace"
            ref="emailCode2Ref"
          ></el-input>
        </div>

        <div class="forgot-form-input-content">
          <el-input
            v-model="emailCode3"
            @input="emailCode3Changed"
            @keydown.backspace.native="emailCode3Backspace"
            ref="emailCode3Ref"
          ></el-input>
        </div>

        <div class="forgot-form-input-content">
          <el-input
            v-model="emailCode4"
            @input="emailCode4Changed"
            @keydown.backspace.native="emailCode4Backspace"
            ref="emailCode4Ref"
          ></el-input>
        </div>

        <div class="forgot-form-input-content">
          <el-input
            v-model="emailCode5"
            @input="emailCode5Changed"
            @keydown.backspace.native="emailCode5Backspace"
            ref="emailCode5Ref"
          ></el-input>
        </div>

        <div class="forgot-form-input-content">
          <el-input
            v-model="emailCode6"
            @input="emailCode6Changed"
            @keydown.backspace.native="emailCode6Backspace"
            ref="emailCode6Ref"
          ></el-input>
        </div>
      </div>

      <div class="register-form-row">
        <div class="register-form-item">
          <div class="register-form-input-title">新密码</div>
          <div class="register-form-input-content">
            <el-input v-model="password" placeholder="请输入" clearable></el-input>
          </div>
        </div>
      </div>

      <div class="register-form-row">
        <div class="register-form-item">
          <div class="register-form-input-title">确认密码</div>
          <div class="register-form-input-content">
            <el-input v-model="confirmPassword" type="password" placeholder="请输入" clearable></el-input>
          </div>
        </div>
      </div>

      <div class="forgot-form-login-btn nas tse">提交</div>

      <div class="register-form-desc-title">
        <div>记起您的密码了 ?</div>
        <div class="nas tse" @click="toLogin()">登录</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'forgotPasswordForm',

  data() {
    return {
      emailCode1: '',
      emailCode2: '',
      emailCode3: '',
      emailCode4: '',
      emailCode5: '',
      emailCode6: ''
    }
  },

  mounted() {
    this.$nextTick(() => {
      this.$refs.emailCode1Ref.focus()
    })
  },

  methods: {
    emailCode1Changed(value) {
      if (value.length > 1) {
        this.emailCode1 = value.slice(0, 1)
      }

      if (this.emailCode1) {
        this.$refs.emailCode2Ref.clear()
        this.$refs.emailCode2Ref.focus()
      }
    },

    emailCode1Backspace() {},

    emailCode2Changed(value) {
      if (value.length > 1) {
        this.emailCode2 = value.slice(0, 1)
      }

      if (this.emailCode2) {
        this.$refs.emailCode3Ref.clear()
        this.$refs.emailCode3Ref.focus()
      }
    },

    emailCode2Backspace() {
      if (!this.emailCode2) {
        this.$refs.emailCode1Ref.clear()
        this.$refs.emailCode1Ref.focus()
      }
    },

    emailCode3Changed(value) {
      if (value.length > 1) {
        this.emailCode3 = value.slice(0, 1)
      }

      if (this.emailCode3) {
        this.$refs.emailCode4Ref.clear()
        this.$refs.emailCode4Ref.focus()
      }
    },

    emailCode3Backspace() {
      if (!this.emailCode3) {
        this.$refs.emailCode2Ref.clear()
        this.$refs.emailCode2Ref.focus()
      }
    },

    emailCode4Changed(value) {
      if (value.length > 1) {
        this.emailCode4 = value.slice(0, 1)
      }

      if (this.emailCode4) {
        this.$refs.emailCode5Ref.clear()
        this.$refs.emailCode5Ref.focus()
      }
    },

    emailCode4Backspace() {
      if (!this.emailCode4) {
        this.$refs.emailCode3Ref.clear()
        this.$refs.emailCode3Ref.focus()
      }
    },

    emailCode5Changed(value) {
      if (value.length > 1) {
        this.emailCode5 = value.slice(0, 1)
      }

      if (this.emailCode5) {
        this.$refs.emailCode6Ref.clear()
        this.$refs.emailCode6Ref.focus()
      }
    },

    emailCode5Backspace() {
      if (!this.emailCode5) {
        this.$refs.emailCode4Ref.clear()
        this.$refs.emailCode4Ref.focus()
      }
    },

    emailCode6Changed(value) {
      if (value.length > 1) {
        this.emailCode6 = value.slice(0, 1)
      }
    },

    emailCode6Backspace() {
      if (!this.emailCode6) {
        this.$refs.emailCode5Ref.clear()
        this.$refs.emailCode5Ref.focus()
      }
    },

    toLogin() {
      this.$emit('login')
    }
  }
}
</script>
<style lang="scss" scoped>
.forgot-form {
  width: 100%;

  display: flex;
  justify-content: center;

  .forgot-form-inner {
    width: 559px;

    .forgot-form-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 1.3;
      color: #0e2845;
    }

    .forgot-form-desc {
      margin-top: 31px;
      margin-bottom: 40px;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #828698;

      .forgot-form-desc-email {
        color: #0e2845;
      }
    }

    .forgot-form-input-content {
      margin-right: 12px;
      width: 60px;
      height: 72px;
      border: 1px solid #d7d8dd;
      border-radius: 8px;

      /deep/ .el-input__inner {
        height: 72px !important;
        border-radius: 8px !important;
        font-size: 32px !important;
        font-weight: 400 !important;
        line-height: 72px !important;
        text-align: center;
        border: 0px solid gray !important;
        color: #0e2845 !important;
      }

      /deep/ .el-input__suffix .el-input__clear {
        font-size: 20px !important;
        margin-right: 8px;
      }

      /deep/ .el-input__inner::placeholder {
        color: #cccccc;
      }
      /* 谷歌 */
      /deep/ .el-input__inner::-webkit-input-placeholder {
        color: #cccccc;
      }
      /* 火狐 */
      /deep/ .el-input__inner:-moz-placeholder {
        color: #cccccc;
      }
      /deep/ /*ie*/
          .el-input__inner:-ms-input-placeholder {
        color: #cccccc;
      }
    }

    .forgot-form-login-btn {
      margin-top: 55px;
      line-height: 72px;
      border-radius: 8px;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      color: #f7f7f7;
      background: #f4aa69;
    }
  }

  .register-form-desc-title {
    margin-top: 40px;

    display: flex;
    align-items: center;

    :first-child {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #828698;
    }

    :last-child {
      margin-left: 4px;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #0b5596;
    }
  }

  .register-form-row {
    margin-top: 33px;

    display: flex;
    align-items: center;

    .register-form-item {
      flex: 1;

      .register-form-input-title {
        font-size: 20px;
        font-weight: 400;
        line-height: 20px;
        color: #828698;
      }

      .register-form-input-content {
        margin-top: 21px;
        height: 72px;
        border: 1px solid #d7d8dd;
        border-radius: 8px;

        /deep/ .el-input__inner {
          border: 0px solid gray !important;
          border-radius: 8px !important;
          font-size: 20px !important;
          font-weight: 400 !important;
          line-height: 72px !important;
          height: 72px !important;
          color: #0e2845 !important;
        }

        /deep/ .el-input__suffix .el-input__clear {
          font-size: 20px !important;
          margin-right: 8px;
        }

        /deep/ .el-input__inner::placeholder {
          color: #cccccc;
        }
        /* 谷歌 */
        /deep/ .el-input__inner::-webkit-input-placeholder {
          color: #cccccc;
        }
        /* 火狐 */
        /deep/ .el-input__inner:-moz-placeholder {
          color: #cccccc;
        }
        /deep/ /*ie*/
          .el-input__inner:-ms-input-placeholder {
          color: #cccccc;
        }
      }
    }
  }
}
</style>
